<template>
  <div>
    <t-layout>
      <t-header>Header</t-header>
      <t-content>Content</t-content>
      <t-footer>Footer</t-footer>
    </t-layout>

    <t-layout style="margin-top: 40px">
      <t-header>Header</t-header>
      <t-layout>
        <t-sider style="width: 100px">Sider</t-sider>
        <t-content>Content</t-content>
      </t-layout>

      <t-footer>Footer</t-footer>
    </t-layout>

    <t-layout style="margin-top: 40px">
      <t-sider style="width: 100px">Sider</t-sider>
      <t-layout>
        <t-header>Header</t-header>
        <t-layout>
          <t-content>Content</t-content>
          <t-footer>Footer</t-footer>
        </t-layout>
      </t-layout>
    </t-layout>
  </div>
</template>

<script>
import Layout from "../../../src/components/layout/layout";
import Header from "../../../src/components/layout/header";
import Content from "../../../src/components/layout/content";
import Footer from "../../../src/components/layout/footer";
import Sider from "../../../src/components/layout/sider";

export default {
  components: {
    "t-layout": Layout,
    "t-header": Header,
    "t-content": Content,
    "t-footer": Footer,
    "t-sider": Sider
  },
  data() {
    return {
      loading: true
    };
  }
};
</script>

<style lang="scss">
.layout {
  > .header {
    padding: 5px;
    height: 50px;
  }
  > .sider {
    padding: 5px;
  }
  > .content {
    padding: 5px;
    height: 150px;
  }
  > .footer {
    padding: 5px;
    height: 50px;
  }
}
</style>